<template>
	<view class="container">
		<!-- 顶部警告栏 -->
		<view class="warning-bar">
			<view class="warning-content">
				<uni-icons type="alert" size="16" color="#fff"></uni-icons>
				<text class="warning-text">取消订单后台有记录 接单人完成率过低 冻结账户禁止接单</text>
			</view>
		</view>

		<!-- 导航按钮 -->
		<view class="nav-buttons">
			<view class="nav-button" @click="gotoMy()">
				<uni-icons type="person" size="24" color="#fff"></uni-icons>
				<text>个人中心</text>
			</view>
			<view class="nav-button primary" @click="pubSender()">
				<uni-icons type="plus" size="24" color="#fff"></uni-icons>
				<text>发布需求</text>
			</view>
		</view>

		<!-- 订单标签页 -->
		<view class="order-tabs">
			<scroll-view scroll-x class="tab-scroll">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{active: activeTab === index}"
					@click="switchTab(index)">
					{{ tab }}
				</view>
			</scroll-view>
		</view>

		<!-- 今日热榜轮播 -->
		<view class="hot-list-container">
			<view class="hot-list-title">今日热榜</view>
			<swiper class="hot-list-swiper" vertical autoplay circular interval="3000">
				<swiper-item v-for="(item, index) in hotList" :key="index">
					<view class="hot-item">
						<text class="hot-rank">{{ index + 1 }}.</text>
						<text class="hot-text">{{ item }}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 订单列表 -->
		<scroll-view class="order-list" scroll-y @scrolltolower="loadMore">
			<view v-for="(order, index) in orderList" :key="order.id" class="order-card" :style="{
			transform: `rotateY(${index % 2 === 0 ? '5deg' : '-5deg'})`,
			zIndex: orderList.length - index
			}" @click="gotoHelpInfo(order)">
				<view class="order-header">
					<image class="avatar" :src="order.avatar" mode="aspectFill"></image>
					<text class="nickname">{{ order.nickname }}</text>
					<text class="time">{{ order.time }}</text>
					<view class="status" v-if="order.status === '已完成'">
						{{ order.status }}
					</view>
				</view>
				<view class="order-content">
					<text class="task">{{ order.task }}</text>
				</view>
				<view class="order-footer">
					<text class="commission">到手佣金￥{{ order.commission }}</text>
				</view>
			</view>
			<view class="load-more" v-if="loading">
				<uni-load-more :status="loading ? 'loading' : 'more'"></uni-load-more>
			</view>
		</scroll-view>

		<!-- 底部导航栏 -->
		<TabBar />
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
	} from 'vue'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'



	// 模拟数据
	const mockOrderList = [{
			id: 1,
			avatar: '/static/avatar/1.jpg',
			nickname: '一具学生尸体',
			time: '2025-07-04 16:55:27',
			task: '去顺丰拿个快递，再寄到我现在的地址，快递费加我微信 给',
			commission: '5.10',
			status: '已完成'
		},
		{
			id: 2,
			avatar: '/static/avatar/2.jpg',
			nickname: '小亓别哭',
			time: '2025-06-19 18:36:19',
			task: '到菜鸟驿站拿两个快递，一个是京东的蓝莓，一个不知道是啥，要求女生，能送到211寝室',
			commission: '6.80',
			status: '已完成'
		},
		{
			id: 3,
			avatar: '/static/avatar/3.jpg',
			nickname: 'kwwkwo',
			time: '2025-06-10 14:02:58',
			task: '快递到图书馆后面新区女寝，快递是个纸盒，不太好拿如果有车可能会方便点',
			commission: '2.55',
			status: '已完成'
		},
		{
			id: 4,
			avatar: '/static/avatar/4.jpg',
			nickname: 'aaa6666',
			time: '2025-05-10 00:00:29',
			task: '帮忙取快递，地址是东区3号楼，快递比较大可能需要两个人',
			commission: '8.00',
			status: '已完成'
		}
	]

	const mockHotList = [
		'帮忙取快递到东区3号楼',
		'代买一杯奶茶送到图书馆',
		'求代课，周三上午三四节',
		'帮忙搬行李到西区宿舍',
		'求代取外卖到实验楼'
	]

	// 响应式数据
	const tabs = ref(['全部订单', '未被接单', '我发布的', '我帮助的', '已完成'])
	const activeTab = ref(0)
	const hotList = ref(mockHotList)
	const orderList = ref([...mockOrderList])
	const loading = ref(false)
	const currentTab = ref(0)

	const tabBar = ref([{
			icon: 'home',
			text: '首页'
		},
		{
			icon: 'help',
			text: '互助'
		},
		{
			icon: 'compose',
			text: '发帖'
		},
		{
			icon: 'chat',
			text: '消息'
		},
		{
			icon: 'person',
			text: '我的'
		}
	])

	// 方法
	const switchTab = (index) => {
		activeTab.value = index
		// 模拟切换标签加载不同数据
		orderList.value = [...mockOrderList].slice(0, index + 2)
	}

	const switchTabBar = (index) => {
		currentTab.value = index
	}

	const loadMore = () => {
		if (loading.value) return
		loading.value = true
		setTimeout(() => {
			const newOrders = mockOrderList.map(item => ({
				...item,
				id: item.id + orderList.value.length,
				commission: (parseFloat(item.commission) + 1).toFixed(2)
			}))
			orderList.value = [...orderList.value, ...newOrders]
			loading.value = false
		}, 1000)
	}

	
	

	onLoad(() => {
		// 可以在这里加载真实数据
	}),
	onPullDownRefresh(()=>{
		uni.showLoading({
			title: '更新中...'
		})
		setTimeout(()=>{
			uni.hideLoading()
		}, 1000)
	});
	onReachBottom(()=>{
		uni.showLoading({
			title: '加载更多...'
		})
		setTimeout(()=>{
			orderList.value= [...orderList.value, ...orderList.value];
			uni.hideLoading();
		}, 1000)
	});
	
	// 跳转到我的
	const gotoMy = () => {
		uni.reLaunch({
			url: '/pages/my/my'
		})
	};
	// 发布需求
	const pubSender = () => {
		uni.navigateTo({
			url: '/pages_help/pubSender/pubSender'
		})
	};
	// 跳转帮助订单
	const gotoHelpInfo = (item) => {
		uni.navigateTo({
			url: '/pages_help/helpInfo/helpInfo'
		})
	};
	
</script>

<style lang="scss">
	/* 使用SCSS嵌套语法 */
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
		position: relative;

		.warning-bar {
			background-color: #ff4d4f;
			padding: 12rpx 24rpx;
			color: #fff;
			font-size: 24rpx;

			.warning-content {
				display: flex;
				align-items: center;

				.warning-text {
					margin-left: 12rpx;
				}
			}
		}

		.nav-buttons {
			display: flex;
			padding: 20rpx 24rpx;
			justify-content: space-between;

			.nav-button {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 48%;
				padding: 16rpx 0;
				border-radius: 8rpx;
				background-color: #999;
				color: #fff;
				font-size: 28rpx;

				&.primary {
					background-color: #2979FF;
				}

				uni-icons {
					margin-right: 8rpx;
				}
			}
		}

		// 订单标签页
		.order-tabs {
			background-color: #fff;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;

			.tab-scroll {
				white-space: nowrap;
				width: 100%;

				.tab-item {
					display: inline-block;
					padding: 0 30rpx;
					font-size: 28rpx;
					color: #666;
					position: relative;

					&.active {
						color: #2979FF;
						font-weight: bold;

						&::after {
							content: '';
							position: absolute;
							bottom: -20rpx;
							left: 50%;
							transform: translateX(-50%);
							width: 60rpx;
							height: 4rpx;
							background-color: #2979FF;
							border-radius: 2rpx;
						}
					}
				}
			}
		}

		// 今日热榜
		.hot-list-container {
			background-color: #fff;
			margin: 20rpx 24rpx;
			padding: 20rpx;
			border-radius: 12rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

			.hot-list-title {
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 16rpx;
				color: #333;
			}

			.hot-list-swiper {
				height: 80rpx;

				.hot-item {
					display: flex;
					align-items: center;
					height: 100%;
					font-size: 26rpx;
					color: #666;

					.hot-rank {
						color: #ff4d4f;
						margin-right: 16rpx;
						font-weight: bold;
					}
				}
			}
		}

		.order-list {
			flex: 1;
			padding: 0 20rpx;
			overflow: hidden;
			width: 710rpx;

			.order-card {
				background-color: #fff;
				border-radius: 16rpx;
				margin-bottom: 24rpx;
				padding: 24rpx;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
				transition: all 0.3s ease;
				perspective: 1000px;
				transform-style: preserve-3d;

				&:active {
					transform: scale(0.98) rotateY(0deg);
				}

				.order-header {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.avatar {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						margin-right: 16rpx;
					}

					.nickname {
						font-size: 28rpx;
						color: #333;
						margin-right: 16rpx;
						flex: 1;
					}

					.time {
						font-size: 24rpx;
						color: #999;
					}

					.status {
						font-size: 24rpx;
						color: #52c41a;
						margin-left: 16rpx;
					}
				}

				.order-content {
					margin-bottom: 20rpx;

					.task {
						font-size: 26rpx;
						color: #666;
						line-height: 1.6;
					}
				}

				.order-footer {
					display: flex;
					justify-content: flex-end;
					
					.commission {
						border: 1rpx solid red;
						border-radius: 10rpx;
						padding: 10rpx;
						
						font-size: 28rpx;
						color: #ff4d4f;
						font-weight: bold;
					}
				}
			}

			.load-more {
				padding: 20rpx 0;
			}
		}

	}
</style>